<form [formGroup]="form">
    <label>AxeOS Device IP: </label>
    <input formControlName="ip" type="text">
    <button style="margin-left: 15px;" class="btn btn-primary" (click)="add()" [disabled]="form.invalid">Add</button>
    <!-- <input type="checkbox" formControlName="sync"> Sync All -->
</form>
<div>
    <button class="btn btn-primary" (click)="refresh()">Refresh</button>
</div>
<div>
    <table cellspacing="0" cellpadding="0" *ngIf="swarm$ | async as swarm">
        <tr>
            <th>IP</th>
            <th>Hash Rate</th>
            <th>Uptime</th>
            <th>Accepted</th>
            <th>Power</th>
            <th>Temp</th>
            <th>Best Difficulty</th>
            <th>Version</th>
            <th>Edit</th>
            <th>Restart</th>
            <th>Remove</th>
        </tr>
        <ng-container *ngFor="let axeOs$ of swarm">
            <tr *ngIf="axeOs$ | async as axe">
                <td><a [href]="'http://'+axe.ip" target="_blank">{{axe.ip}}</a></td>
                <td>{{axe.hashRate | number: '1.2-2'}} <small>Gh/s</small></td>
                <td>{{axe.uptimeSeconds | dateAgo}}</td>
                <td>{{axe.sharesAccepted}}</td>
                <td>{{axe.power | number: '1.2-2'}} <small>W</small> </td>
                <td>{{axe.temp}} <small>C</small></td>
                <td>{{axe.bestDiff}}</td>
                <td>{{axe.version}}</td>
                <td><button class="btn btn-primary" (click)="edit(axe)">&#9998;</button></td>
                <td><button class="btn btn-danger" (click)="restart(axe)">&#9850;</button></td>
                <td><button class="btn btn-secondary" (click)="remove(axe)">&#10006;</button></td>
            </tr>
        </ng-container>
    </table>
</div>

<div class="modal-backdrop" *ngIf="showEdit" (click)="showEdit = false"></div>
<div class="modal card" *ngIf="showEdit">
    <div class="close" (click)="showEdit = false">&#10006;</div>
    <h1>{{selectedAxeOs.ip}}</h1>
    <app-edit [uri]="'http://' + selectedAxeOs.ip"></app-edit>
</div>